<template>
  <div id="login-page">
    <div class="container">
      <el-card class="inner">
        <slot name="header">
          <h1>Login</h1>
        </slot>
        <el-form label-width="70px" label-position="left">
          <el-form-item label="Account">
            <el-input v-model="form.account" placeholder="请输入你的账号"/>
          </el-form-item>
          <el-form-item label="Password">
            <el-input
              v-model="form.password"
              placeholder="请输入密码"
              @keyup.native.enter="handleBtnLoginClick"
            />
          </el-form-item>
        </el-form>
        <slot footer>
          <el-button
            style="width: 100%;"
            type="primary"
            @click="handleBtnLoginClick"
          >Login
          </el-button>
        </slot>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginPage",

  data() {
    return {
      form: {
        account: '',
        password: ''
      }
    }
  },

  methods: {
    handleBtnLoginClick() {
      if (this.form.account === 'gengwenhao' &&
        this.form.password === 'gengwenhao') {
        this.$store.commit('user/SET_TEST_LOGIN')
        this.$router.push({name: 'home'})
      } else {
        this.$message.warning('请检查您的账号和密码')
        this.form = {...this.$options.data().form}
      }
    }
  }
}
</script>

<style scoped lang="scss">
#login-page {
  .container {
    width: 1024px;
    height: 100vh;
    position: relative;
    margin: 0 auto;

    .inner {
      width: 500px;
      height: 320px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #efefef;
      border-radius: 4px;
      padding: 24px;
    }
  }
}
</style>